<template>
  <div style="min-width: 700px">
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('clearInfo')"></jxf-titletip>
    <div class="main">
      <div class="blankContent"></div>
      <el-form :model="QAInfo" ref="QAInfo" clearable class="announcement" label-width="160px" :rules="rules">
        <!-- 基本信息 -->
        <div class="basicInfo">
          <i>基本信息</i>
          <el-form-item prop="question" required label="帮助问题：">
            <el-input v-model="QAInfo.question" placeholder="请输入问题" ref="question" clearable maxlength="30"></el-input>
          </el-form-item>
          <el-form-item prop="terminal" required label="展示对象：">
            <el-select v-model="QAInfo.terminal" clearable placeholder="请选择">
              <el-option label="全部" value="0"></el-option>
              <el-option label="买家端" value="1"></el-option>
              <el-option label="卖家端" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="isShow" label="显示设置：">
            <el-switch
              v-model="QAInfo.showPage"
              active-color="#13ce66"
              inactive-color="#f2f2f2">
            </el-switch>
          </el-form-item>
        <el-form-item prop="sort" required label="排序：">
          <el-input v-model="QAInfo.sort" clearable placeholder="请输入排序" ref="sort" maxlength="10"></el-input>
        </el-form-item>
        </div>
        <!-- 帮助正文 -->
        <div class="announcementContent">
          <i>帮助正文</i>
          <el-form-item label="帮助正文：" prop="answer" required>
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6}"
              placeholder="请输入内容"
              v-model="QAInfo.answer"
              maxLength="150">
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="btnGroup">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "EditQAlist",
    props: {
      dataInfo: {
        type: Object,
        default: () => {
          return {
            answer: "",
            question: "",
            terminal: "0",
            isShow: "",
            sort: ""
          }
        }
      }
    },
    data() {
      return {
        title: "发布QA",
        QAInfo: {
          ...this.dataInfo,
          showPage: this.dataInfo.isShow == '0' ? false : true
        },
        editorContent: "",
        isTip: false,
        isNullTip: false,
        rules: {
          question: [
            { required: true, message: 'QA问题不能为空', trigger: ['change', 'blur'] },
          ],
          terminal: [
            { required: true, message: '展示对象不能为空', trigger: ['change', 'blur'] },
          ],
          sort: [
            { required: true, message: '排序不能为空', trigger: ['change', 'blur'] },
            { validator: window.validate.pInteger, trigger: ['blur', 'change'] }
          ],
          answer: [
            { required: true, message: '帮助正文不能为空', trigger: ['change', 'blur'] },
          ]
        }
      }
    },
    methods: {
      submitForm() {
        let data = {
          ...this.QAInfo,
          isShow: this.QAInfo.showPage ? "1" : "0"
        }
        this.$refs['QAInfo'].validate((valid) => {
            if (valid) {
              if(!this.QAInfo.answer) {
                this.isNullTip = true
                return
              }
              if(this.QAInfo.answer.replace(/<\/?.+?>/g,"").replace(/ /g,"").replace('&nbsp;', ' ').length > 150) {
                this.isTip = true
                return
              }
              ajax.post(apis.operate.qaEdit, data).then(result => {
                if (result.code == "10000000") {
                  this.QAInfo = {};
                  this.$refs['QAInfo'].resetFields()
                  this.$emit('fresh')
                  this.$emit('clearInfo')
                } else {
                  this.$message.error(result.message)
                }
              })
            }})
      },
    },
    mounted() {

    },
    watch: {
      dataInfo() {
        this.QAInfo = this.dataInfo
      },
    }
  }
</script>

<style lang="scss" scoped>
  .numtip {
    padding: 10px 0;
    font-size: 12px;
    color: red;
  }
  .main {
    display: flex;
    min-width: 1000px;
    min-height: 800px;
    justify-content: flex-start;
    .blankContent {
      width: 16%;
      min-width: 200px;
    }
    .announcement {
      padding: 40px 0 0 150px;
      margin-top: 20px;
      width: 84%;
      min-width: 500px;
      border-radius: 4px;
      background: #fff;
      box-sizing: border-box;
      .el-input {
        width: 80%;
        max-width: 400px;
      }
      .basicInfo {
        position: relative;
        width: 640px;
        i {
          position: absolute;
          left: -280px;
          padding: 5px 0 5px 20px;
          display: block;
          width: 180px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-style: normal;
          background: #9ea7b4;
        }
        i:after {
          background-color: transparent;
          content: "";
          position: absolute;
          top: 0;
          right: -50px;
          border: 25px solid;
          border-color: transparent transparent transparent #9ea7b4;
        }
      }
      .announcementContent {
        position: relative;
        top: 20px;
        i {
          position: absolute;
          left: -280px;
          padding: 5px 0 5px 20px;
          display: block;
          width: 180px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-style: normal;
          background: #9ea7b4;
        }
        i:after {
          background-color: transparent;
          content: "";
          position: absolute;
          top: 0;
          right: -50px;
          border: 25px solid;
          border-color: transparent transparent transparent #9ea7b4;
        }
        #editorElem {

        }
        .btnGroup {
          margin-top: 20px;
          .el-button {
            padding: 12px 40px;
          }
        }
      }
    }
  }
</style>
